<template>
  <a-modal v-model:visible="visible" :footer="false" @cancel="closeModal">
    <template #title>
      {{ title }}
    </template>
    <h4 style="margin-top: 0">复制分享链接</h4>
    <a-typography-paragraph copyable>{{ link }}</a-typography-paragraph>
    <h4>手机扫码查看</h4>
    <img :src="codeImg"/>
  </a-modal>
</template>

<script setup lang="ts">
import {defineExpose, defineProps, ref, withDefaults} from "vue";
// @ts-ignore
import QRCode from "qrcode";
import message from "@arco-design/web-vue/es/message";

interface Props {
  // 分享链接
  link: string;
  // 弹窗标题
  title: string;
}

// 表示要展示的图片
const codeImg = ref();

const props = withDefaults(defineProps<Props>(), {
  link: () => "",
  title: () => "分享"
});

const visible = ref(false);

const openModal = () => {
  visible.value = true;
}

// 暴露给父组件调用
defineExpose({
  openModal
});

const closeModal = () => {
  visible.value = false;
}

// 二维码生成
QRCode.toDataURL(props.link)
    .then((url: any) => {
      codeImg.value = url;
    })
    .catch((err: any) => {
      message.error("生成二维码失败：" + err.message);
    });

</script>


